body.dark {
  background: $dark-background;
  color: $dark-color;
  #header {
    h1.logo {
      a {
        color: $dark-color;
        .st0 {
          fill: $dark-primary;
        }
      }
    }
  }

  #side-left .side-container {
    border-color: rgba(255, 255, 255, 0.2);
  }

  #side-right .side-container {
    border-color: $dark-border;
    background: $dark-background;
  }
  .colset-main {
    background: linear-gradient($dark-border, $dark-border) no-repeat center/1px
      100%;
  }
  hr.divider,
  .dependency-header {
    border-color: $dark-border;
  }
  .radio {
    color: $dark-color;
    .caret {
      background: $dark-background;
      border-color: $dark-color;
    }
    &:hover {
      .caret {
        border-color: $dark-primary;
      }
    }
    &.checked {
      color: $dark-primary;
      .caret {
        border-color: $dark-primary;
        background: $dark-primary;
      }
    }
  }
  .actions .actions-container {
    background: $dark-background-secondary;
  }
  #side-left a {
    color: $dark-color;
    &:hover {
      color: $dark-primary;
    }
  }
  .hamburger-inner,
  .hamburger-inner::before,
  .hamburger-inner::after {
    background: white;
  }
  a.button,
  button.button {
    border-color: $dark-color;
    background: $dark-background;
    color: $dark-color;
    &:before {
      background: $dark-color;
    }
    &:hover {
      color: $dark-background;
    }
  }
  a.button.inverse.active,
  button.button.inverse.active {
    color: $dark-background;
  }
  .input {
    background: $dark-background;
    border-color: $dark-color;
    color: $dark-color;
    &:focus {
      border-color: $dark-primary;
    }
    &::selection {
      color: $dark-color;
      background: #80ea6e;
    }
  }
  .explorer {
    background: $dark-background;
    color: $dark-color;
    .colset-explorer .explorer-content,
    .colset-explorer .head {
      border-color: $dark-border;
    }
  }
  #side-left a:hover {
    color: $dark-color;
    opacity: 0.8;
  }
  .explorer-actions {
    background: $dark-background-secondary;
  }
  .explorer-ul .file,
  .explorer-ul .folder {
    color: $dark-color;
  }
  .overlay {
    background: rgba($dark-background, 0.9);
  }
  .dialog-dependencies .control-input {
    background: $dark-background-secondary;
    border-color: $dark-border;
    .input {
      background: $dark-background-secondary;
      color: $dark-color;
      &::placeholder {
        color: rgba($dark-color, 0.5);
      }
    }
    .close {
      .st0 {
        stroke: $dark-color;
      }
    }
  }
  .dialog-dependencies ul li {
    background: $dark-background-secondary;
    border-color: $dark-border;
    a {
      color: $dark-color;
    }
  }
  .dialog-dependencies ul li a.dependency.disabled,
  .dialog-dependencies ul li a.dependency.disabled:hover,
  .dialog-dependencies ul li a.dependency.disabled.selected,
  .dialog-dependencies ul li a.dependency.disabled.selected:hover {
    background: $dark-background-secondary;
    color: rgba($dark-color, 0.5);
    box-shadow: 0 0 0 transparent !important;
    margin: 0;
    strong {
      color: rgba($dark-color, 0.5);
    }
    span.group {
      color: lighten($dark-background, 0.6);
    }
  }
  .dialog-dependencies ul li a.dependency span.group,
  ul.dependencies-list li div span.group {
    color: $dark-background;
  }
  ul.dependencies-list li {
    border-color: $dark-border;
  }
  .explorer-ul .file .icon,
  .explorer-ul .folder .icon {
    color: $dark-color;
  }
  .explorer-ul .file.selected,
  .explorer-ul .folder.selected {
    color: $dark-primary;
    background: $dark-background-secondary;
  }
  .explorer-ul .file,
  .explorer-ul .folder {
    &:hover {
      background: $dark-background-secondary;
    }
    &.disabled,
    &.disabled:hover {
      background: $dark-background;
    }
  }

  pre.prism-code {
    span.explorer-number {
      color: rgba($dark-color, 0.5);
      &:before {
        background-color: $dark-background-secondary;
        color: rgba($dark-color, 0.5);
      }
    }
    &:before {
      color: rgba($dark-color, 0.5);
      background-color: $dark-background-secondary;
    }
  }

  .token.cdata,
  .token.comment,
  .token.doctype,
  .token.prolog {
    color: $dark-color;
  }

  code[class*='language-'],
  pre[class*='language-'],
  .token.operator,
  .token.punctuation,
  .token.operator {
    color: $dark-color;
  }
  .popup-share {
    .popop-share-container {
      background: $dark-background-secondary;
    }
    .popup-content label {
      color: $dark-color;
    }
    .input {
      background: $dark-background-secondary;
    }
    .popup-header {
      border-color: $dark-border;
    }
    a.button,
    button.button {
      background: $dark-background-secondary;
    }
    .popup-header .close {
      color: $dark-color;
      .st0 {
        stroke: $dark-color;
      }
    }
  }

  .placeholder-radio,
  .placeholder-radio:after,
  .placeholder-input:after,
  .placeholder-button:after,
  .placeholder-text {
    background: $dark-placeholder;
  }
  .placeholder-input {
    background: $dark-background;
    box-shadow: inset 0 -4px 0 0 $dark-placeholder;
  }
  .placeholder-button {
    box-shadow: inset 0 0 0 2px $dark-placeholder;
    background: $dark-background;
  }
  .actions {
    .placeholder-button:after {
      background: $dark-background;
    }
    .placeholder-button {
      background: $dark-background-secondary;
      box-shadow: inset 0 0 0 2px $dark-background;
    }
  }
  .explorer-actions .placeholder-button {
    box-shadow: inset 0 0 0 2px $dark-background;
    &:after {
      background: $dark-background;
    }
  }
  .Toastify__toast {
    box-shadow: 0 0 0 6px rgba(#000, 0.2);
    background: $dark-background;
    color: $dark-color;
    border-top-color: $dark-border;
    border-right-color: $dark-border;
    border-bottom-color: $dark-border;
    .toast-close {
      .icon-time .st0 {
        stroke: $dark-color;
      }
    }
  }
  .popup-share .popup-action {
    border-top-color: $dark-border;
  }
  .dialog-dependencies ul {
    &::-webkit-scrollbar {
      background: $dark-background-secondary;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba($dark-color, 0.3);
    }
  }
  .explorer .colset-explorer .right .explorer-content {
    &::-webkit-scrollbar {
      background: $dark-background;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba($dark-color, 0.3);
    }
  }
  .warnings {
    background: $dark-background;
    color: $dark-color;
    border-top-color: $dark-border;
    border-right-color: $dark-border;
    border-bottom-color: $dark-border;
    .icon-time .st0 {
      stroke: $dark-color;
    }
    ul {
      color: $dark-color;
    }
  }
  .radio.err {
    color: #d60000;
    cursor: not-allowed;
  }
  .radio.err .caret {
    background: #d60000;
    border: 2px solid #d60000;
  }

  .radio,
  .hamburger,
  #side-left a,
  .explorer-ul .file,
  .explorer-ul .folder,
  ul.dependencies-list li a {
    &:focus {
      outline: 1px dotted $dark-border;
    }
  }
  .explorer-ul .file.disabled,
  .explorer-ul .folder.disabled {
    outline: none;
  }

  a.button,
  button.button {
    &:focus {
      box-shadow: 0 0 0 4px lighten($dark-border, 4);
    }
  }

  .explorer-select {
    select {
      border: 1px solid $dark-border;
      background: $dark-background;
      color: $dark-color;
    }
    &:before {
      border-bottom: 6px solid $dark-color;
    }
    &:after {
      border-top: 6px solid $dark-color;
    }
  }
  .placeholder-select {
    border: 1px solid $dark-border;
    background: $dark-background;
  }

  #header .switch-mobile {
    border-color: $dark-border;
  }
  #header .switch-mobile button {
    color: $dark-color;
  }
  .dialog-dependencies ul li.group-title span,
  .dialog-dependencies ul li a.dependency.selected,
  ul.dependencies-list li div span.group,
  .dialog-dependencies ul li a.dependency span.group {
    background: $dark-primary;
  }
  .dialog-dependencies ul li a.dependency.selected span.group {
    background: white;
  }
  .dialog-dependencies ul li a.dependency.disabled span.group,
  .dialog-dependencies ul li a.dependency.disabled:hover span.group,
  .dialog-dependencies ul li a.dependency.disabled.selected span.group,
  ul.dependencies-list li div.disabled span.group {
    background: rgba($dark-color, 0.3);
    color: rgba($dark-background, 0.7) !important;
  }

  .markdown,
  .markdown-source {
    a,
    a:hover {
      color: $dark-link;
    }
  }

  .actions .placeholder-button-special {
    box-shadow: inset 0 0 0 2px $dark-color;
    background: $dark-background;
  }
}
